<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>淄川区工程项目规划实地一张图系统</title>
  <meta name="keywords" content="一张图" />
  <meta name="description" content="一张图系统" />
  <link rel="stylesheet" href="{{url('openlayers/resource/bootstrap/css/bootstrap.min.css')}}">
  <script src="{{url('openlayers/resource/bootstrap/js/bootstrap.min.js')}}"></script>
  <script src="{{url('openlayers/resource/axios/axios.min.js')}}"></script>
  <link rel="stylesheet" href="{{url('openlayers/resource/ol/ol.css')}}">
  <script src="{{url('openlayers/resource/ol/ol.js')}}"></script>
  <style>
    html,
    body {
      min-width: 1000px;
    }

    .head {
      height: 50px;
      background-color: #099;
    }

    .layout {
      position: absolute;
      display: flex;
      width: 100%;
      height: 100vh;
    }

    .aside {
      bottom: -5550px;
      width: 350px;
      min-width: 260px;
      height: 100%;
      overflow-y: auto;
    }

    .article {
      min-width: 1000px;
      flex: 1;
      height: 100%;
      overflow-y: auto;
      background-color: #0f9;
    }

    /* 鼠标位置控件层样式设置 */
    #mouse-position {
      float: right;
      position: absolute;
      bottom: 55px;
      /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
      z-index: 2000;
    }

    /* 鼠标位置信息自定义样式设置 */
    .custom-mouse-position {
      color: rgb(87, 17, 218);
      font-size: 16px;
      font-family: "微软雅黑";
    }

    #menu {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 15px;
      z-index: 2000;
    }

    .top-aligned {
      position: absolute;
      top: 10px;
      /* 距离容器顶部10像素 */
      right: 10px;
      /* 距离容器左侧50像素 */
      /* 更多样式如宽度、背景色等 */
      width: 270px;
      background-color: #f0f0f0;
      padding: 10px;
      box-shadow: 0 0 5px #000;
    }

    .ol-popup {
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
      filter: drop-shadow(0 1px 4px #FFC125);
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 12px;
      left: -50px;
      min-width: 360px;
    }

    .ol-popup:after,
    .ol-popup:before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .ol-popup:after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }

    .ol-popup:before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }

    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
      color: red;
    }

    .ol-popup-closer:after {
      content: "✖";
    }

    #layerscontrol {
      position: absolute;
      right: 10px;
      top: 60px;
      font-size: 15px;
      z-index: 2000;
      opacity: 0.9;
    }
  </style>
</head>

<body>
  <div class="" style="width: 100%;position: fixed;">
    <div class="head">
      <div style="margin-left: 10px;font-size: 30px; font-weight: 600;color: #ffffff;">淄川区工程项目规划落地一张图系统</div>
    </div>
    <div class="layout">

      <aside class="aside" id="app" style="padding: 10px 10px 50px 10px;">
        <div class="input-group mb-3">
          <input type="text" class="form-control" id="searchkey" placeholder="档案名、编号、建设单位">
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2" style="cursor: pointer;" onclick="fetchDataList(1);">搜索</span>
          </div>
        </div>
        <div  style="position111:sticky; bottom111: 55px;">
          <ul class="list-group" id="list-group"><ul>            
        </div>
        <div style="display: flex; justify-content: center;margin-top:20px;">
          <div style="text-align: center;display: flex;justify-content: center;">
            <div style="margin: 10px; color: #999;font-size: 12px;line-height: 32px;" class="total"></div>
          </div>
        </div>
          <nav>
            <ul class="pagination justify-content-center">
              <li class="page-item">
                <a class="page-link" href="#" title="上一页" aria-label="Previous">«</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" title="下一页" aria-label="Next">»</a>
              </li>
            </ul>
          </nav>
      </aside>

      <article class="article">

        <!-- 地图容器 -->
        <div id="map" class="map"></div>

        <!-- 鼠标位置信息 -->
        <div id="mouse-position"></div>

        <!-- 菜单 -->
        <div id="menu">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-secondary opacity-75">
              <a href="{{url('dangan/search')}}" target="_blank" style="color: white;">查看全部档案列表</a>
            </label>
            <!-- <label class="btn btn-secondary opacity-75">
              <input type="checkbox" checked autocomplete="off" id="allPoint" onclick="checkAddAllPoint();"> 工程点
            </label> -->
            <!-- <label class="btn btn-secondary opacity-75">
              <input type="checkbox" autocomplete="off" id="allText" onclick="checkAddAllText();"> 工程名
            </label> -->
            <label class="btn btn-secondary opacity-75">
              <input type="checkbox" autocomplete="off" id="layersM" onclick="layersmanger();"> 图层管理
            </label>
            <label class="btn btn-secondary opacity-75" id="restore">复位</label>
          </div>
        </div>

        <!-- 图层管理 -->
        <div id="layerscontrol" style="display: none;">
          <div class="card">
            <h6 class="card-header">图层管理</h6>
            <div class="card-body">
              <div class="" style="display:flex; flex-direction: column;" data-toggle="buttons">
                <div>
                  <label class="btn  opacity-75">
                    <input type="checkbox" checked autocomplete="off" id="luwang" onclick="checkLuWang();"> 街道图
                  </label>
                  <input type="range" class="form-range" min="0" max="1" step="0.1" id="jdOpacity" value="1">
                </div>
                <div>
                  <label class="btn opacity-75">
                    <input type="checkbox" autocomplete="off" id="yingXiang" onclick="checkYingXiang()"> 卫星图
                  </label>
                  <input type="range" class="form-range" min="0" max="1" step="0.1" id="yxOpacity" value="1">
                </div>
                <div>
                  <label class="btn opacity-75">
                    <input type="checkbox" autocomplete="off" id="clw" onclick="checkclw()"> 路网图
                  </label>
                  <input type="range" class="form-range" min="0" max="1" step="0.1" id="lwOpacity" value="1">
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 弹出图层，跟随经纬度 -->
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content">            
            <!-- <div id="name" style="font-weight:600;"><!-标题--/div> -->
            <div id="danganhao" style="font-weight:600;"><!--档案号--></div>
            <div id="nianfen"><!--年份--></div>
            <div id="leibie"><!--类别--></div>
            <div id="jianshedanwei"><!--建设单位--></div>
            <div id="xiangmumingcheng"><!--项目名称--></div>
            <div id="xiangmuweizhi"><!--项目位置--></div>
            <div id="xuanzhizheng"><!--选址证--></div>
            <div id="yongdizheng"><!--用地证--></div>
            <div id="fanganshendingtongzhishu"><!--方案审定通知书--></div>
            <div id="gongchengzheng"><!--工程证--></div>
            <div id="jungongzheng"><!--竣工证--></div>
            <div id="tiaojianbianhao"><!--条件编号--></div>
            <div id="xiangcunbianhao"><!--乡村编号--></div>
            <div id="heshu"><!--档案盒数--></div>
            <div id="pdf"><!--查看pfd文档--></div>
          </div>
        </div>

      </article>
    </div>
  </div>

  <script>
    const PI = Math.PI
    const AXIS = 6378245.0
    const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2

    function delta(wgLon, wgLat){
      let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
      let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
      const radLat = (wgLat / 180.0) * PI
      let magic = Math.sin(radLat)
      magic = 1 - OFFSET * magic * magic
      const sqrtMagic = Math.sqrt(magic)
      dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
      dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
      return [dLon, dLat]
    }

    function outOfChina(lon, lat){
      if (lon < 72.004 || lon > 137.8347) {
        return true
      }
      if (lat < 0.8293 || lat > 55.8271) {
        return true
      }
      return false
    }

    function transformLat(x, y){
      let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
      ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
      ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
      ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
      return ret
    }

    function transformLon(x, y){
      let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
      ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
      ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
      ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
      return ret
    }

    const forEachPoint = function(func){
      return function(input, opt_output, opt_dimension){
        const len = input.length
        const dimension = opt_dimension || 2
        let output
        if (opt_output) {
          output = opt_output
        } else if (dimension !== 2) {
          output = input.slice()
        } else {
          output = new Array(len)
        }
        for (let offset = 0; offset < len; offset += dimension) {
          func(input, output, offset)
        }
        return output
      }
    }

    const gcj02 = {
      toWGS84: forEachPoint(function(input, output, offset){
        let lng = input[offset]
        let lat = input[offset + 1]
        if (!outOfChina(lng, lat)) {
          const deltaD = delta(lng, lat)
          lng = lng - deltaD[0]
          lat = lat - deltaD[1]
        }
        output[offset] = lng
        output[offset + 1] = lat
      }),
      fromWGS84: forEachPoint(function(input, output, offset){
        let lng = input[offset]
        let lat = input[offset + 1]
        if (!outOfChina(lng, lat)) {
          const deltaD = delta(lng, lat)
          lng = lng + deltaD[0]
          lat = lat + deltaD[1]
        }
        output[offset] = lng
        output[offset + 1] = lat
      }),
    }

    const projzh = {
      ll2smerc: new ol.proj.getTransform('EPSG:4326', 'EPSG:3857'),
      smerc2ll: new ol.proj.getTransform('EPSG:3857', 'EPSG:4326'),
    }

    // wgs84 -> gcj02
    projzh.ll2gmerc = function(input, opt_output, opt_dimension){
      const output = gcj02.fromWGS84(input, opt_output, opt_dimension)
      return projzh.ll2smerc(output, output, opt_dimension)
    }
    // gcj02 -> wgs84
    projzh.gmerc2ll = function(input, opt_output, opt_dimension){
      const output = projzh.smerc2ll(input, input, opt_dimension)
      return gcj02.toWGS84(output, opt_output, opt_dimension)
    }
    // 3857 -> gcj02
    projzh.smerc2gmerc = function(input, opt_output, opt_dimension){
      let output = projzh.smerc2ll(input, input, opt_dimension)
      output = gcj02.fromWGS84(output, output, opt_dimension)
      return projzh.ll2smerc(output, output, opt_dimension)
    }
    // gcj02 -> 3857
    projzh.gmerc2smerc = function(input, opt_output, opt_dimension){
      let output = projzh.smerc2ll(input, input, opt_dimension)
      output = gcj02.toWGS84(output, output, opt_dimension)
      return projzh.ll2smerc(output, output, opt_dimension)
    }

    // 定义GCJ02墨卡托投影坐标系
    const gcj02Mecator = new ol.proj.Projection({
      code: 'GCJ-02',
      // extent不能缺少，OpenLayers frame 渲染的时候需要
      extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244],
      units: 'm',
    })

    // 将GCJ02墨卡托投影坐标系注册进OpenLayers
    ol.proj.addProjection(gcj02Mecator)

    // 覆盖默认的转换方法
    ol.proj.addCoordinateTransforms('EPSG:4326', gcj02Mecator, projzh.ll2gmerc, projzh.gmerc2ll)
    ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc)
  </script>

  <script>

    // 初始加载第一页数据
    let currentPage  = 1;
    fetchDataList(currentPage); 
    // 总页数
    let totalPage;
    // 总数据
    let totalData;

    // 获得数据列表
    function fetchDataList(currentPage)
    {
      var searchkey = document.getElementById('searchkey').value;

      axios.get('{{url('api/dangan_list?searchkey=')}}' + searchkey + '&page=' + currentPage)
        .then(response => {
          console.log('档案列表：：：：'+ JSON.stringify(response.data.data));
          console.log('档案列表：：：：'+ response);

          // 数据的总页数
          totalPage = response.data.last_page;

          // 总共数据
          totalData = response.data.total;
          
          // 获取数据容器
          var container = document.getElementById('list-group');
          container.textContent = '';
          // 循环遍历数据并插入到页面
          response.data.data.forEach(function (item) {
            // 创建新的元素来显示数据
            var div = document.createElement('div');
            // div.innerHTML = '<p>Item: ' + item.xiangmumingcheng + '</p>'; // 假设每个item都有一个name属性
            // div.innerHTML = '<li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;"><a href="" target="_blank" title="' + item.jianshedanwei + '">' + item.xiangmumingcheng + '</a><img src="{{url('openlayers/images/location.png')}}" title="定位到：'+ item.danganhao +'" style="width: 18px; height: 21px;cursor: pointer;" onclick=getLayerCenter(map,'+'"'+item.danganhao+'"'+')></li>';
            div.innerHTML = `<li class="list-group-item" style="display: flex;justify-content: space-between;align-items:center;">
                <a href="{{url("openlayers/pdf/web/viewer.html?file=")}}{{url("openlayers/dangan")}}/${item.danganhao}.pdf" target="_blank" title="${item.jianshedanwei}">${item.xiangmumingcheng}</a>
                  <img src="{{url('openlayers/images/location.png')}}" title="定位到：${item.danganhao}" style="width: 18px; height: 21px;cursor: pointer;" onclick="fitTo('${item.danganhao}')"></li>`;
            // 将新元素添加到容器中
            container.appendChild(div);
          });

          // 统计总数量
          const total = document.querySelector('.total');
          total.textContent = `总共${response.data.total}条记录`;

          // 更新分页按钮
          updatePagination(currentPage, totalPage);
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }

    // 分页样式1：分页导航点击事件处理
    // document.querySelectorAll('.page-link').forEach(link => {
    //   link.addEventListener('click', e => {
    //     e.preventDefault();
    //     const pageText = e.target.text;
    //     console.log("输出的内容"+pageText);
    //     if(pageText.trim() === '«' || pageText.trim() === '‹') {
    //       if (currentPage > 1) {
    //         currentPage --;
    //       }
    //     } else if(pageText.trim() === '»' || pageText.trim() === '›') {
    //       if (currentPage < totalPage) { // 总共有totalPage页数据
    //         currentPage ++;
    //       }
    //     } else {
    //       // 返回10进制数字
    //       currentPage = parseInt(pageText, 10);
    //       alert("十进制数字:"+currentPage);
    //     }
    //     fetchDataList(currentPage);
    //   });
    // });

    // 处理分页事件的函数, isNextPage=true 上一页 isNextPage=false下一页
    // function handlePagination(isNextPage) {
    //   if (isNextPage && currentPage < maxPage) {
    //     currentPage++;
    //   } else if (!isNextPage && currentPage > 1) {
    //     currentPage--;
    //   }
    //   fetchDataList(currentPage);
    // }

    // 分页样式2：
    let startNum = 1;
    var endNum = 5;
    function updatePagination(currentPage, lastPage) {

      // 更新分页按钮的可用性
      const pagination = document.querySelector('.pagination');      
      pagination.textContent = '';

      if(totalData == 0)
      {
        // 不显示分页
        return;
      }

      var li = document.createElement('li');
      li.className = 'page-item';
      li.innerHTML = `<a class="page-link" href="#" title="上一页" aria-label="Previous">«</a>`;
      // 单击上一页
      if(currentPage > 1)
      {
        var Previous = currentPage - 1;
        li.addEventListener('click', () => {
          fetchDataList(Previous);
        });
      }      
      pagination.appendChild(li);

      // for (let i = startNum; i <= endNum; i++) {
      //   const li = document.createElement('li');
      //   li.className = 'page-item';
      //   if (i === currentPage) {
      //     li.classList.add('active');
      //   }
      //   li.addEventListener('click', () => {
      //     fetchDataList(i);
      //     currentPage = i;
      //   });        

      //   // 如果当前页超过5页
      //   if(currentPage >= 3)
      //   {
      //     startNum = currentPage - 2;

      //     // 已经显示最后一页
      //     if(currentPage >= totalPage)
      //     {
      //       endNum = totalPage;
      //     } else {
      //       endNum = currentPage + 2;
      //     }

      //     // 重新设置分页
      //     pagination.textContent = '';
      //     li.className = 'page-item';
      //     li.innerHTML = `<a class="page-link" href="#" title="上一页" aria-label="Previous">«</a>`;
      //     // 单击上一页
      //     if(currentPage > 1)
      //     {
      //       var Previous = currentPage - 1;
      //       li.addEventListener('click', () => {
      //         fetchDataList(Previous);
      //       });
      //     }      
      //     pagination.appendChild(li);

      //     for (let i = startNum; i <= endNum; i++) {
      //       const li = document.createElement('li');
      //       li.className = 'page-item';
      //       if (i === currentPage) {
      //         li.classList.add('active');
      //       }
      //       li.addEventListener('click', () => {
      //         fetchDataList(i);
      //         currentPage = i;
      //       });
            
      //       li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
      //       pagination.appendChild(li);                        
      //     }

      //   } else {
      //     li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
      //     pagination.appendChild(li); 
      //   }
                  
      // }

      li = document.createElement('li');
      li.className = 'page-item';
      li.innerHTML = `<a class="page-link" href="#" title="下一页" aria-label="Next">»</a>`;
      // 单击下一页
      if(currentPage < totalPage)
      {
        var next = currentPage + 1;
        li.addEventListener('click', () => {          
          console.log("当前页面："+ next);
          fetchDataList(next);
        });
      }
      pagination.appendChild(li);
    }

  </script>

  <script type="text/javascript">

    /** 创建要添加的图层**/
    // 创建图层：路网（街道）
    const MapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        projection: gcj02Mecator, // 高德地图偏移问题
        // 设置本地离线瓦片所在路径
        url: '{{url("openlayers/mapabc/roadmap")}}' + '/{z}/{x}/{y}.png',
      })
    });

    // 创建图层：影像
    const YXMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        projection: gcj02Mecator, // 高德地图偏移问题
        // 设置本地离线瓦片所在路径
        url: '{{url("openlayers/mapabc/satellite")}}' + '/{z}/{x}/{y}.jpg',
      })
    });

    // 创建图层：纯路网
    const clwMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        projection: gcj02Mecator, // 高德地图偏移问题
        // 设置本地离线瓦片所在路径
        url: '{{url("openlayers/mapabc/overlay")}}' + '/{z}/{x}/{y}.png',
      })
    });

    /**** 创建地图视图 ****/
    // 把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标
    let centerPos = ol.proj.transform([117.96, 36.64], 'EPSG:4326', 'EPSG:3857');
    console.log(centerPos);
    let zoom = 13;
    var view = new ol.View({
      center: centerPos, //地图中心位置
      zoom: zoom, //地图初始层级
      maxZoom: 18,
      minZoom: 1,
    })

    const mousePositionControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:4326',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
    });

    //创建地图,把地图挂接到容器上
    let map = new ol.Map({
      target: 'map',
      layers: [MapLayer],
      view: view,
      controls: ol.control.defaults.defaults().extend([mousePositionControl]),
    });



    /*** 弹出对话框 ***/
    // 获取popup的dom对象
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

    /***
    ** 隐藏Overlay可使用Overlay.getElement().style.display = 'none'。
    ** 彻底删除Overlay使用Overlay.setMap(null)。
    ***/

    // 创建popup
    var popup = new ol.Overlay({
      element: container, // 指定Overlay使用的DOM元素
      autoPan: true, // 如果弹框不在视口范围内，自动移动地图，让其可见
      positioning: 'bottom-center', // 用于设置弹框相对于传入坐标点的位置
      stopEvent: false, // 是否停止事件传播
      autoPanAnimation: {
        duration: 99
      }
    });
    map.addOverlay(popup);

    // 关闭popup
    closer.onclick = function () {
      popup.setPosition(undefined);
      closer.blur();
      return false;
    };

    // 监听鼠标单击事件，点击feature后弹出popup
    map.on('click', function (e) {
      var coordinate = e.coordinate;
      // console.log("coordinate屏幕坐标的内容:" + coordinate);
      var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        // 通过forEachFeatureAtPixel方法获取用户点击位置的特征对象和图层对象，然后可以进一步处理这些对象以获取特定图层的属性信息
        // feature: 在当前层中被点击的要素。 // layer: 包含这个要素的图层。
        // 在这里处理点击特定图层的逻辑
        // 可以获取特定图层的属性信息，并将其显示为弹出窗口
        console.log("feature的内容:" + JSON.stringify(feature));
        console.log("被点击的要素的属性:" + JSON.stringify(feature.getProperties()));
        // console.log("layer的内容:" + JSON.stringify(layer));       
        // console.log("获得的面积值：" + feature.get("MJ"));
        // console.log("获得的内容：" + feature.get("JSMJ"));

        // 获取图层名称,已经设置过图层名字
        // const layerName = layer.get('name');
        // console.log(layerName); // 输出图层名字

        // 获得要素的名字
        var featureName = feature.get("Layer");

        // async function fetchData() {
        //   try {
        //     const res = await axios.get('{{url("api/dangan_name?danganhao=")}}' + featureName);
        //     // 等待请求完成后执行
        //     console.log("哈哈" + res.data);
        //     return res;
        //       // 标题
        //       // var name = document.getElementById('name');
        //       // name.innerText = '标题';
        //       // content.appendChild(name);

        //       // 档案号
        //       if(res.data.danganhao){
        //         var danganhao = document.getElementById('danganhao');
        //         danganhao.innerText = '档案号：' + res.data.danganhao;
        //         content.appendChild(danganhao);
        //       }

        //       // 年份
        //       if(res.data.nianfen){
        //         var nianfen = document.getElementById('nianfen');
        //         nianfen.innerText = '年份：' + res.data.nianfen;
        //         content.appendChild(nianfen);
        //       }

        //       // 类别
        //       if(res.data.leibie){
        //         var leibie = document.getElementById('leibie');
        //         leibie.innerText = '类别：' + res.data.leibie;
        //         content.appendChild(leibie);
        //       }

        //       // 建设单位
        //       if(res.data.jianshedanwei){
        //         var jianshedanwei = document.getElementById('jianshedanwei');
        //         jianshedanwei.innerText = '建设单位：' + res.data.jianshedanwei;
        //         content.appendChild(jianshedanwei);
        //       }

        //       // 项目名称
        //       if(res.data.xiangmumingcheng){
        //         var xiangmumingcheng = document.getElementById('xiangmumingcheng');
        //         xiangmumingcheng.innerText = '项目名称：' + res.data.xiangmumingcheng;
        //         content.appendChild(xiangmumingcheng);
        //       }

        //       // 项目位置
        //       if(res.data.xiangmuweizhi){
        //         var xiangmuweizhi = document.getElementById('xiangmuweizhi');
        //         xiangmuweizhi.innerText = '项目位置：' + res.data.xiangmuweizhi;
        //         content.appendChild(xiangmuweizhi);
        //       }

        //       // 选址证
        //       if(res.data.xuanzhizheng){
        //         var xuanzhizheng = document.getElementById('xuanzhizheng');
        //         xuanzhizheng.innerText = '选址证：' + res.data.xuanzhizheng;
        //         content.appendChild(xuanzhizheng);
        //       }

        //       // 用地证
        //       if(res.data.yongdizheng){
        //         var yongdizheng = document.getElementById('yongdizheng');
        //         yongdizheng.innerText = '用地证：' + res.data.yongdizheng;
        //         content.appendChild(yongdizheng);
        //       }

        //       // 方案审定通知书
        //       if(res.data.fanganshendingtongzhishu){
        //         var fanganshendingtongzhishu = document.getElementById('fanganshendingtongzhishu');
        //         fanganshendingtongzhishu.innerText = '方案审定通知书：' + res.data.fanganshendingtongzhishu;
        //         content.appendChild(fanganshendingtongzhishu);
        //       }

        //       // 工程证
        //       if(res.data.gongchengzheng){
        //         var gongchengzheng = document.getElementById('gongchengzheng');
        //         gongchengzheng.innerText = '工程证：' + res.data.gongchengzheng;
        //         content.appendChild(gongchengzheng);
        //       }

        //       // 竣工证
        //       if(res.data.jungongzheng){
        //         var jungongzheng = document.getElementById('jungongzheng');
        //         jungongzheng.innerText = '竣工证：' + res.data.jungongzheng;
        //         content.appendChild(jungongzheng);
        //       }

        //       // 条件编号
        //       if(res.data.tiaojianbianhao){
        //         var tiaojianbianhao = document.getElementById('tiaojianbianhao');
        //         tiaojianbianhao.innerText = '条件编号：' + res.data.tiaojianbianhao;
        //         content.appendChild(tiaojianbianhao);
        //       }

        //       // 乡村编号
        //       if(res.data.xiangcunbianhao){
        //         var xiangcunbianhao = document.getElementById('xiangcunbianhao');
        //         xiangcunbianhao.innerText = '乡村编号：' + res.data.xiangcunbianhao;
        //         content.appendChild(xiangcunbianhao);
        //       }

        //       // 档案盒数量
        //       if(res.data.heshu){
        //         var heshu = document.getElementById('heshu');
        //         heshu.innerText = '档案盒数量：' + res.data.heshu;
        //         content.appendChild(heshu);
        //       }

        //       // 查看pdf文档资料
        //       var pdf = document.getElementById('pdf');
        //       // pdf.innerHTML = '<a href="../openlayers/pdf/web/viewer.html?file=http://localhost/ZiChuanGuiHua/public/openlayers/dangan/' + res.data.danganhao + '.pdf" target="_blank">查看档案材料(pdf)</a>';
        //       pdf.innerHTML = '<a href="{{url("openlayers/pdf/web/viewer.html?file=")}}' + '{{url("openlayers/dangan")}}/' + res.data.danganhao + '.pdf" target="_blank">查看档案材料(pdf)</a>';
        //       content.appendChild(pdf);
        //   } catch (error) {
        //     console.error("抛出错误", error);
        //   }
        // } 

        // constfetchData();

        // 获得要显示的数据(鼠标单击对应的一条数据)
        axios.get('{{url("api/dangan_name?danganhao=")}}' + featureName)
        .then((res) => {
          // console.log(res.data);

          // 标题
          // var name = document.getElementById('name');
          // name.innerText = '标题';
          // content.appendChild(name);

          // 档案号
          if(res.data.danganhao){
            var danganhao = document.getElementById('danganhao');
            danganhao.innerText = '档案号：' + res.data.danganhao;
            // content.appendChild(danganhao);
          }

          // 年份
          if(res.data.nianfen){
            var nianfen = document.getElementById('nianfen');
            nianfen.innerHTML = '<b>年份：</b>' + res.data.nianfen;
            // content.appendChild(nianfen);
          }

          // 类别
          if(res.data.leibie){
            var leibie = document.getElementById('leibie');
            leibie.innerHTML = '<b>类别：</b>' + res.data.leibie;
            // content.appendChild(leibie);
          }

          // 建设单位
          if(res.data.jianshedanwei){
            var jianshedanwei = document.getElementById('jianshedanwei');
            jianshedanwei.innerHTML = '<b>建设单位：</b>' + res.data.jianshedanwei;
            // content.appendChild(jianshedanwei);
          }

          // 项目名称
          if(res.data.xiangmumingcheng){
            var xiangmumingcheng = document.getElementById('xiangmumingcheng');
            xiangmumingcheng.innerHTML = '<b>项目名称：</b>' + res.data.xiangmumingcheng;
            // content.appendChild(xiangmumingcheng);
          }

          // 项目位置
          if(res.data.xiangmuweizhi){
            var xiangmuweizhi = document.getElementById('xiangmuweizhi');
            xiangmuweizhi.innerHTML = '<b>项目位置：</b>' + res.data.xiangmuweizhi;
            // content.appendChild(xiangmuweizhi);
          }

          // 选址证
          if(res.data.xuanzhizheng){
            var xuanzhizheng = document.getElementById('xuanzhizheng');
            xuanzhizheng.innerHTML = '<b>选址证：</b>' + res.data.xuanzhizheng;
            // content.appendChild(xuanzhizheng);
          }

          // 用地证
          if(res.data.yongdizheng){
            var yongdizheng = document.getElementById('yongdizheng');
            yongdizheng.innerHTML = '<b>用地证：</b>' + res.data.yongdizheng;
            // content.appendChild(yongdizheng);
          }

          // 方案审定通知书
          if(res.data.fanganshendingtongzhishu){
            var fanganshendingtongzhishu = document.getElementById('fanganshendingtongzhishu');
            fanganshendingtongzhishu.innerHTML = '<b>方案审定通知书：</b>' + res.data.fanganshendingtongzhishu;
            // content.appendChild(fanganshendingtongzhishu);
          }

          // 工程证
          if(res.data.gongchengzheng){
            var gongchengzheng = document.getElementById('gongchengzheng');
            gongchengzheng.innerHTML = '<b>工程证：</b>' + res.data.gongchengzheng;
            // content.appendChild(gongchengzheng);
          }

          // 竣工证
          if(res.data.jungongzheng){
            var jungongzheng = document.getElementById('jungongzheng');
            jungongzheng.innerHTML = '<b>竣工证：</b>' + res.data.jungongzheng;
            // content.appendChild(jungongzheng);
          }

          // 条件编号
          if(res.data.tiaojianbianhao){
            var tiaojianbianhao = document.getElementById('tiaojianbianhao');
            tiaojianbianhao.innerHTML = '<b>条件编号：</b>' + res.data.tiaojianbianhao;
            // content.appendChild(tiaojianbianhao);
          }

          // 乡村编号
          if(res.data.xiangcunbianhao){
            var xiangcunbianhao = document.getElementById('xiangcunbianhao');
            xiangcunbianhao.innerHTML = '<b>乡村编号：</b>' + res.data.xiangcunbianhao;
            // content.appendChild(xiangcunbianhao);
          }

          // 档案盒数量
          if(res.data.heshu){
            var heshu = document.getElementById('heshu');
            heshu.innerHTML = '<b>档案盒数量：</b>' + res.data.heshu;
            // content.appendChild(heshu);
          }

          // 查看pdf文档资料
          var pdf = document.getElementById('pdf');
          // pdf.innerHTML = '<a href="../openlayers/pdf/web/viewer.html?file=http://localhost/ZiChuanGuiHua/public/openlayers/dangan/' + res.data.danganhao + '.pdf" target="_blank">查看档案材料(pdf)</a>';
          pdf.innerHTML = '<a href="{{url("openlayers/pdf/web/viewer.html?file=")}}' + '{{url("openlayers/dangan")}}/' + res.data.danganhao + '.pdf" target="_blank">查看档案材料(pdf)</a>';
          // content.appendChild(pdf);                  

        });

        // 在坐标位置弹出popup
        popup.setPosition(coordinate);
      });      
    });

    /**** 监听鼠标移动事件，鼠标移动到feature区域时变为手形 ****/
    map.on('pointermove', function (e) {
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

    /*** 设置图层的透明度 ***/
    // 设置街道层的透明度
    document.addEventListener("mousemove", function () {
      // 获取输入框的值
      var jdOpacity = parseFloat(document.getElementById('jdOpacity').value);
      console.log(jdOpacity); // 输出输入框的值
      MapLayer.setOpacity(jdOpacity);
    });

    // 设置影像图层的透明度
    document.addEventListener("mousemove", function () {
      // 获取输入框的值
      var yxOpacity = parseFloat(document.getElementById('yxOpacity').value);
      console.log(yxOpacity); // 输出输入框的值
      YXMapLayer.setOpacity(yxOpacity);
    });

    // 设置路网图层的透明度
    document.addEventListener("mousemove", function () {
      // 获取输入框的值
      var lwOpacity = parseFloat(document.getElementById('lwOpacity').value);
      console.log(lwOpacity); // 输出输入框的值
      clwMapLayer.setOpacity(lwOpacity);
    });

      // 添加地块
      // geojson数据的源
      let vectorSource = new ol.source.Vector({
        url: '{{url("openlayers/geojson")}}' + '/' + 'zichuan.geojson',
        format: new ol.format.GeoJSON(),
      });

      // 添加线地块
      // let vectorSource1 = new ol.source.Vector({
      //   url: '{{url("openlayers/geojson")}}' + '/' + '123.geojson',
      //   format: new ol.format.GeoJSON(),
      // });
      // var geojsonLayer1 = new ol.layer.Vector({
      //   name: '淄川规划档案',
      //   source: vectorSource1,
      //   // style: styles,
      //   style: styles,
      //   zIndex: 200
      // });
      // map.addLayer(geojsonLayer1);
      // 添加线地块

      // 图层的样式
      var styles = (feature) => {
        return new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 2,
            opacity: 0.2
          }),
          fill: new ol.style.Fill({
            color: 'rgb(125,125,125,0.5)',
          }),
          text: new ol.style.Text({
            // text: '名字',
            text: feature.get('Layer').toString(),
            font: '18px bold serif',
            fill: new ol.style.Fill({
              color: '#000'
            }),
            stroke: new ol.style.Stroke({
              color: '#fff',
              width: 2
            })
          })
        });
      }      

      // 添加geojson数据的图层
      var geojsonLayer = new ol.layer.Vector({
        name: '淄川规划档案',
        source: vectorSource,
        // style: styles,
        style: styles,
        zIndex: 200
      });

      map.addLayer(geojsonLayer); // 添加地块,geojson数据

      /***** 鼠标经过图层，设置新的样式 *****/

      // 设置鼠标经过的时候的图层样式 
      var hover_styles = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#cccccc',
          width: 2,
          opacity: 0.5
        }),
        fill: new ol.style.Fill({
          color: 'rgb(0,0,255,0.5)',
        }),
      });

      let hoverFeature;
      map.on('pointermove', (e) => {
        let features = map.getFeaturesAtPixel(e.pixel)
        if (features) {
          if (hoverFeature) {
            hoverFeature.setStyle(undefined);
            hoverFeature = null
          }
          hoverFeature = features[0];
          console.log(hoverFeature);
          if(hoverFeature)
          {
            hoverFeature.setStyle(hover_styles);
          }        
        }
        else {
          if (hoverFeature) {
            hoverFeature.setStyle(undefined);
          }
        }
      });

    // 定位到元素图层
    function fitTo(type) {
      const features = geojsonLayer.getSource().getFeatures();
      console.log("features:::", features);
      features.forEach((v) => {
        if (v.get("Layer") == type) {
          // const polygon = v.getGeometry(); // 获取feature的几何形状
          // map.getView().fit(polygon, { padding: [170, 50, 30, 150] });

          // 获取要素的几何形状
          var geometry = v.getGeometry();
          // 获取边界矩形
          var extent = geometry.getExtent();
          // 计算要素的中心坐标
          var center = ol.extent.getCenter(extent);
          // 输出中心坐标
          // console.log("中心坐标：", center); // 输出形如 [longitude, latitude] 的数组

          // 移动到坐标中心点
          map.getView().animate({
            center: center,
            duration: 1000, // 动画持续时间，单位毫秒
            zoom: 18,
          });
        }
      });

      // 遍历要素查找,some()方法用于检查数组中是否有符合条件的要素
      var hasFeatureWithProperty = features.some(function(feature) {
          return feature.get("Layer") === type;
      });
      // console.log(hasFeatureWithProperty);
      // 根据结果进行操作
      if (hasFeatureWithProperty) {
          console.log('有要找的要素');
      } else {
          console.log('没有找到要素');
          alert('此工程暂时没有标注地块');
      }
    }
    
    // function fitTo(type) {
    //   var feature = geojsonLayer.getSource().getFeatureById("layer");
    //   console.log(feature);
    //   if (feature) {
    //     var geometry = feature.getGeometry();
    //     var coordinate = geometry.getCoordinates();
    //     map.getView().animate({
    //         center: coordinate,
    //         duration: 1000, // 动画持续时间，单位毫秒
    //         zoom: 16,
    //     });
    //   }
    // }

    // 当浏览器窗口大小变化时，更新地图的大小和位置
    window.addEventListener('resize', function() {
      // 当窗口大小变化时，调用地图的更新方法
      map.updateSize();
    });
  </script>
  <script src="{{url('openlayers/resource/olinclude/function.js')}}"></script>
</body>

</html>